<template>
    <view class="ineedBuy">
        <view class="bidList_entire">
            <view class="bidList_images">
                <image src="{{detail.topicImage }}" mode="aspectFit" style="height: 200px"></image>
            </view>
            <view style="text-align: center;">{{detail.name}}</view>
            <view class="bidList_flex">
                <view class="bidList_flex1 backf5f5f9">
                    <text>卖家最低售价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex2 backf5f5f9">
                    <view class="bidList_pire">￥
                        <text>{{detail.minSellerOfferAmount}}</text>
                    </view>
                </view>
                <view class="bidList_flex3 backe6e6e6">
                    <text>买家最高出价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex4 backe6e6e6">
                    <view class="bidList_pire">￥
                        <text>{{detail.maxBuyerOfferAmount}}</text>
                    </view>
                </view>
            </view>
            <view class="bidList_flex" style="margin-top: 20rpx;background:#ffffff;">
                <view class="bidList_flex1 back_fff">
                    <text>我的出价</text>
                    <view class="border-right" style="background: #e6e6e6"></view>
                </view>
                <view class="ineedBuy_chujia">
                    <text>￥</text>
                    <view><input type="text" bindinput="getNowPrice" style="width: 220rpx;"></view>
                </view>
                <view class="back_fff icon" style="font-size: 20rpx;line-height: 84rpx;" wx:if="{{checkAmount}}">您的价格不是最高价格</view>
            </view>
            <view class="bidList_flex" style="margin-top: 20rpx;background:#ffffff;">
                <view class="bidList_flex1 back_fff">
                    <text>支付担保押金</text>
                </view>
                <view class="ineedBuy_chujia">
                    <text>￥{{mjPrice}}</text>
                </view>
            </view>
            <view class="bidList_flex_sta" style="margin-top: 20rpx;" @tap="urlTo('/pages/bidList/timeLimit')">
                <view class=" back_fff">
                    <text>出价时效性</text>
                </view>
                <view class=" back_fff">
                    <text>{{sxxInfo}}天</text>
                </view>
                <view class=" back_fff icon">
                    <i class="iconfont icon-jiantou"></i>
                </view>
            </view>

            <!-- 使用优惠券 -->
            <view class="useDiscounts">
                <navigator url="/pages/personalCenter/coupons?type=FREE_BOND" wx:if="{{!hasCou}}">
                    <checkbox-group class="useDiscounts_one" bindchange="change">
                        <checkbox wx:if="{{!changeCou}}" checked="{{changeCou}}"/>
                        <checkbox wx:if="{{changeCou}}" checked="{{!changeCou}}"/>
                    </checkbox-group>
                    <text class="useDiscounts_one_text">使用优惠券</text>
                </navigator>
                <view wx:if="{{hasCou}}">
                    <checkbox-group class="useDiscounts_to" bindchange="change">
                        <checkbox checked="{{hasCou}}"/>
                    </checkbox-group>
                    <view class="useDiscounts_to_text" wx:if="{{getCoupon.couponType == '现金优惠'}}">
                        使用{{getCoupon.couponType}}劵 ，可用余额：<text class="shareColor">{{getCoupon.couponAmount}}</text>元
                    </view>
                    <view class="useDiscounts_to_text" wx:if="{{getCoupon.couponType != '现金优惠'}}">
                        使用{{getCoupon.couponType}}劵
                    </view>
                </view>
            </view>
            <view class="cashPledge_list_size">支付/使用优惠券后，可以在“我的购买”中买家出价列表中查看</view>
            <!-- 使用优惠券 end -->
        </view>
        <view class="pofix">
            <view class="button type_main " @tap="submitForm">确认出价</view>
        </view>
        <!-- 担保金 start-->
        <view class="cashPledge" wx:if="{{toPayShow}}" bindtap="closeToPayShow">
            <view class="cashPledge_back" catchtap="stopToPayShow">
                <view class="cashPledge_list">
                    <text>支付担保</text>
                    <text style="font-size:60rpx;color:#000">￥{{payOrderInfo.amountBondReal ? payOrderInfo.amountBondReal : 0 }}</text>
                </view>
                <view class="cashPledge_list">
                    <text>请选择支付方式</text>
                </view>
                <view class="cashPledge_list" @tap="wxLogin" style="border-bottom:1px solid #e6e6e6;">
                    <view class="iconWis">
                        <i class="iconfont icon-weixinzhifu2"></i>
                    </view>
                    <text>微信支付</text>
                </view>
                <!--<view class="cashPledge_list" style="margin-bottom: 100rpx;">
                    <view class="iconWis">
                        <i class="iconfont icon-zhifubao"></i>
                    </view>
                    <text>支付宝支付</text>
                </view>-->
            </view>
        </view>
        <!-- 押金 end-->
    </view>

</template>
<script>
import wepy from 'wepy'
import api from '@/api/api'
import tip from '@/utils/tip'
import { GOODSDETAIL, TOPAYSXX, CHOOSECOU } from '@/utils/constant'

export default class buyerBidList extends wepy.page {
    config = {
        // 配置当前页面
        navigationBarTitleText: '我要出价' // 头部标题
    }

    data = {
        detail: '',
        form: {},
        mjPrice: '',
        userId: '',
        sxxInfo: 30,
        toPayShow: false,
        hasCou:false,
        getCoupon:'',
        changeCou:false,
        checkAmount:false,
        payOrderInfo:''
    }

    methods = {
        // 方法
        urlTo(url) {
            wx.navigateTo({
                url: url
            })
        },
        //我的出价
        getNowPrice(e) {
            const t = this;
            let v = e.detail.value,
                reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                a = t.detail.maxBuyerOfferAmount;
            if(a!=0 && reg.test(v)){
                if(v <= a){
                    t.checkAmount = true;
                }else {
                    t.checkAmount = false;
                }
            }
            this.form['amount'] = v
        },
        submitForm() {
            const t = this
            t.UpdateOfferFun()
        },
        closeToPayShow() {
            const t = this
            t.toPayShow = false
        },
        stopToPayShow() {
            const t = this
            t.toPayShow = true
        },
        change(){
            const t = this;
            t.changeCou = t.changeCou ? false : true;
            t.hasCou = false;
            t.getCoupon = '';
            wx.removeStorageSync(CHOOSECOU);
            t.$apply();
        }
    }

    /**
     * 更新出价价格
     * @returns {Promise.<void>}
     */
    async UpdateOfferFun() {
        const t = this
        let am = t.form['amount'],
            reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
        if (!am) {
            tip.alert('请输入我的出价')
        } else if (!reg.test(am)) {
            tip.alert('我的出价必须为数字金额')
        } else {
            t.disCreateFun();
        }
    }

    /**
     * 获取担保押金
     * @returns {Promise.<void>}
     */
    async getMjFun() {
        const t = this
        const a = await api.getJfPrice()
        if (a.data.code == 0) {
            t.mjPrice = a.data.data.buyerOfferBond
            t.$apply()
        } else {
            tip.error(a.data.msg)
        }
    }

    onShow() {
        const t = this
        let detail = wx.getStorageSync(GOODSDETAIL);
        let userId = wx.getStorageSync('userId');
        let sxx = wx.getStorageSync(TOPAYSXX);
        let coupon = wx.getStorageSync(CHOOSECOU);
        if (detail) {
            t.detail = detail;
            if (userId) {
                t.userId = userId;
                t.getMjFun();
            }
            if (sxx) {
                t.sxxInfo = sxx;
            }
            if(coupon){
                t.hasCou = true;
                t.getCoupon = coupon;
            }else {
                t.hasCou = false;
            }
        }
        t.$apply();
    }

    /**
     * 生成支付订单
     * @returns {Promise.<void>}
     */
    async disCreateFun() {
        const t = this;
        let d = {};
        d['userId'] = t.userId;
        d['amountOffer'] = t.form['amount'];
        d['dayLimit'] = t.sxxInfo;
        d['goodsId'] = t.detail.id;
        d['seller'] = 0;
        d['size'] = t.detail.size;
        if(t.getCoupon&&t.hasCou){
            d.couponId = t.getCoupon.id;
        }
        const a = await api.bondCreate({
            query: d,
            method: 'POST'
        })
        if (a.data.code == 0) {
            if (a.data.data.state !== 'FINISH') {
                t.toPayShow = true;
                t.payOrderInfo = a.data.data;
                t.$apply();
            } else {
                tip.success('支付成功！！',2000);
                wepy.switchTab({
                    url: '/pages/main/main'
                })
            }
        } else {
            tip.error(a.data.msg)
        }
    }

    // 获取唯一标识openId
    async getmyOpenid(a) {
        const t = this
        const json = await api.getOpenid(
            {
                query: {}
            },
            'userId=' + t.userId + '&code=' + a
        )
        if (json.data.code == 0) {
            t.toPayFun();
        } else {
            tip.error(json.data.msg)
        }
    }

    // 微信登录
    async wxLogin() {
        const t = this
        wx.login({
            success: function (res) {
                if (res.code) {
                    t.getmyOpenid(res.code)
                } else {
                    tip.error(res.msg)
                }
            }
        })
    }

    /**
     * 去支付
     * @returns {Promise.<void>}
     */
    async toPayFun() {
        const t = this;
        const a = await api.orderTrade({
            query: {
                userId: t.payOrderInfo.appUserId,
                orderId: t.payOrderInfo.id,
                orderType: 'BOND',
                payType: 'WX_MINI'
            },
            method: 'POST'
        })
        if (a.data.code == 0) {
            // 微信支付
            wx.requestPayment({
                timeStamp: a.data.data.wxpayPamram.timeStamp,
                nonceStr: a.data.data.wxpayPamram.nonceStr,
                package: a.data.data.wxpayPamram.package,
                signType: 'MD5',
                paySign: a.data.data.wxpayPamram.paySign,
                success: function () {
                    tip.success('支付成功！！', 2000);
                    wx.removeStorageSync(CHOOSECOU);
                    wepy.switchTab({
                        url: '/pages/main/main'
                    })
                }
            })
        } else {
            tip.error(a.data.msg)
        }
    }
}
</script>
<style lang="less">
.ineedBuy {
    .cashPledge_list_size {
        padding: 20rpx;
        font-size: 26rpx;
        color: #999;
    }
    // 押金 start
    .cashPledge {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(51, 51, 51, 0.356);
        z-index: 99;
        .cashPledge_back {
            background: #f5f5f9;
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
        }
        .cashPledge_list {
            text-align: center;
            background: #fff;
            margin-bottom: 20rpx;
            padding: 30rpx 0;

            text {
                vertical-align: middle;
            }
        }
        .iconWis {
            text-align: center;
            width: ~'70rpx';
            display: inline-block;
            vertical-align: middle;
            .icon-weixinzhifu2 {
                color: #3cb034;
            }
            .icon-zhifubao {
                color: #108ee9;
            }
            i {
                font-size: 20px;
            }
        }
    }
    // 押金 end
    .pofix {
        position: fixed;
        bottom: 0;
        width: 100%;
        .btn_to {
            display: flex;
            > view {
                width: 50%;
                font-size: 36rpx;
                height: 95rpx;
                line-height: 95rpx;
                text-align: center;
            }
            > view:first-child {
                background: #ffb025;
                color: #fff;
            }
            > view:last-child {
                background: #fff;
                color: #333;
            }
        }
    }
    > view:first-child {
        margin-top: 0 !important;
    }
    > view {
        margin-top: 20rpx;
    }
    .bidList_entire {
        .bidList_images{
            text-align: center;
        }
        .backf5f5f9 {
            background: #FFA622;
            color: #fff;
        }
        .back_fff {
            background: #fff;
        }
        .backe6e6e6 {
            background: #70B957;
            color: #fff;
        }
        .color_org {
            color: #ffb025;
        }

        .bidList_flex_sta {
            display: flex;
            justify-content: flex-start;
            padding: 20rpx 0;
            background: #fff;
            > view:first-child {
                width: 30%;
                text-align: left;
                text {
                    padding-left: 20rpx;
                }
            }
            > view:nth-child(2) {
                padding-left: 40rpx;
            }
            > view:last-child {
                margin-left: auto;
                width: 10%;
                text-align: center;
            }
        }
        .bidList_flex {
            display: flex;
            justify-content: flex-start;
            .bidList_flex1 {
                width: 30%;
                overflow: hidden;
                padding: 20rpx 0;
                position: relative;
                text {
                    padding-left: 20rpx;
                }
                .border-right {
                    position: absolute;
                    top: 4rpx;
                    right: 0;
                    width: 2rpx;
                    height: 80rpx;
                }
            }
            .bidList_flex2 {
                width: 20%;
                text-align: right;
                padding: 20rpx 0;
                .bidList_pire {
                    font-size: 22rpx;
                    color: #fff;
                    text {
                        padding-right: 20rpx;
                        font-size: 30rpx;
                    }
                }
            }
            .bidList_flex3 {
                width: 30%;
                position: relative;
                padding: 20rpx 0;
                .modification {
                    text-align: right;
                    view:first-child {
                        width: 50rpx;
                        height: 50rpx;
                    }
                    view {
                        display: inline-block;
                        i {
                            vertical-align: middle;
                            font-size: 36rpx;
                            padding-right: 10rpx;
                        }
                        text {
                            padding-left: 0;
                            vertical-align: middle;
                            display: inline-block;
                        }
                    }
                }
                text {
                    padding-left: 20rpx;
                }
                .border-right {
                    position: absolute;
                    top: 4rpx;
                    right: 0;
                    width: 2rpx;
                    height: 80rpx;
                    color: #fff;
                }
            }
            .bidList_flex4 {
                width: 20%;
                text-align: center;
                padding: 20rpx 0;
                .bidList_pire {
                    font-size: 22rpx;
                    color: #fff;
                    text {
                        font-size: 30rpx;
                    }
                }
                .modification {
                    view:first-child {
                        width: 50rpx;
                        height: 50rpx;
                    }
                    view {
                        display: inline-block;
                        i {
                            vertical-align: middle;
                            font-size: 32rpx;
                            padding-right: 10rpx;
                        }
                        text {
                            padding-left: 0;
                            vertical-align: middle;
                            display: inline-block;
                        }
                    }
                }
            }
            .ineedBuy_chujia {
                background: #fff;
                display: flex;
                > text:first-child {
                    vertical-align: middle;
                    height:88rpx;
                    line-height:88rpx;
                    padding-left: 40rpx;
                    font-size: 22rpx;
                }
                > view {
                    vertical-align: middle;
                    padding: 16rpx 0;
                    padding-right: 15rpx;
                    input {
                        background: #e6e6e6;
                        border: 1px solid #999;
                        width: 320rpx;
                    }
                }
                > text:last-child {
                    vertical-align: middle;
                    width: 120rpx;
                    font-size: 30rpx;
                    // padding: 10rpx 0;
                }
            }
        }
    }
    .useDiscounts {
        padding: 20rpx;
        .useDiscounts_one {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_one_text {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_to {
            display: inline-block;
            vertical-align: middle;
        }
        .useDiscounts_to_text {
            display: inline-block;
            vertical-align: middle;
        }
    }
}
</style>
